<!DOCTYPE html> 
<html>
	<head>
		<title>GPS Beast</title>
		<link rel="stylesheet" media="screen" href="css/superfish.css"/>
		<link rel="stylesheet" media="screen" href="css/gpsbeast.css"/>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="js/hoverIntent.js"></script>
		<script src="js/superfish.js"></script>
	</head>
	<body>
		<div class="topstrip">
			<div class="logobox">
				<img style="width:200px" src="graphics/logo.png" alt="GPS Beast" />
			</div>
			<div class="menucontainer">
				<ul class="sf-menu" id="topmenu">
					<li class="current">
						<a href="followed.html">ATHLETE COMPARE</a>
					</li>
					<li class="current">
						<a href="followed.html">OVERALL BEAST</a>
					</li>
					<li class="current">
						<a href="followed.html">MENU ITEM</a>
					</li>
					<li class="current">
						<a href="followed.html">MENU ITEM</a>
					</li>
					<li class="current" style="border-right:1px solid #ddd">
						<a href="followed.html">MENU ITEM</a>
					</li>		
				</ul>
			</div>
			<div class="titlestrip">
				<div class="title">
					ATHLETE COMPARE
				</div>
				<div class="description">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
				</div>
			</div>
			<div class="accountstrip">
				<div class="title" style="font-size:20px">
					Craig Taylor<br/>
					<img src="graphics/profilepic.jpg"/ style="width:85px;margin-top:4px;">
				</div>
			</div>
		</div>

		<div class="pagestrip">
			<div class="menucontainer submenu">
				<ul class="sf-menu" id="topmenu">
					<li class="current">
						<a href="followed.html">SUB MENU ITEM</a>
					</li>
					<li class="current">
						<a href="followed.html">SUB MENU ITEM</a>
					</li>
					<li class="current">
						<a href="followed.html">SUB MENU ITEM</a>
					</li>
					<li class="current">
						<a href="followed.html">SUB MENU ITEM</a>
					</li>
					<li class="current" style="border-right:1px solid #ddd">
						<a href="followed.html">SUB MENU ITEM</a>
					</li>		
				</ul>
			</div>
			<div>
				<br/><br/><br/><br/>
				<div style="border:1px solid #FF0000">
					<img style="width:150px" src="graphics/profilepic250.jpg" />
					<img style="width:150px" src="graphics/profilepic250harry.jpg" />
				</div>
				<table class="athlete_compare" style="width:100%">
					<tr>
						<th style="width:20px">&nbsp;</th>
						<th>&nbsp;</th>
						<th style="text-align:center">&nbsp;</th>
						<th>&nbsp;</th>
						<th style="width:20px">&nbsp;</th>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="good">2200km</td>
						<td>All Time Distance</td>
						<td class="bad">1234km</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="good">22000m</td>
						<td>All Time Elevation Gain</td>
						<td class="bad">24235m</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="bad">89km</td>
						<td>Biggest Ride</td>
						<td class="good">200km</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="good">3300m</td>
						<td>Biggest Climb</td>
						<td class="bad">2342m</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="bad">44kph</td>
						<td>All Time Average Speed</td>
						<td class="good">50kph</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="bad">70kph</td>
						<td>Max Ever Speed</td>
						<td class="good">100kph</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="bad">2:34</td>
						<td>Fastest 1 Mile</td>
						<td class="good">2:01</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="good">7:34</td>
						<td>Fastest 5 Miles</td>
						<td class="bad">7:55</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="bad">23:30</td>
						<td>Fastest 10 Miles</td>
						<td class="good">19:43</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="bad">60:46</td>
						<td>Fastest 25 Miles</td>
						<td class="good">60:14</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="bad">2h:59m</td>
						<td>Fastest 50 Miles</td>
						<td class="good">2h:50m</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="good">4h30m</td>
						<td>Fastest 100 Miles</td>
						<td class="bad">4h42m</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="bad">212watts</td>
						<td>Average Power</td>
						<td class="good">301watts</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="bad">754watts</td>
						<td>Maximum Power</td>
						<td class="good">986watts</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="bad">212watts</td>
						<td>Functional Threshold Power</td>
						<td class="good">324watts</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="bad">297watts</td>
						<td>Maximum 10 Minute Power</td>
						<td class="good">324watts</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td class="bad">241watts</td>
						<td>Maximum 20 Minute Power</td>
						<td class="good">324watts</td>
						<td>&nbsp;</td>
					</tr>
				</table>
			</div>
		</div>

	</body>
</html>


<script>
	(function($){ //create closure so we can safely use $ as alias for jQuery
		$(document).ready(function(){
			var example = $('#topmenu').superfish({});
		});
	})(jQuery);
</script>